<div>
    <h2>ngFor</h2>
    <ul class="list-group" *ngFor="let item of list">
        <li class="list-group-item">{{item.name}}</li>
    </ul>
</div>
<hr>
<div>
    <h2>ngIf</h2>
    <ul *ngFor="let item of list">
        <li *ngIf="item.name=='xiaomo'" class="list-group-item">哇,我在list列表中找到了 <span class="label label-info">{{item.name}}</span>
        </li>
    </ul>
</div>
<hr>
<div>
    <h2>ngSwitch</h2>
        <input name="myVal" type="radio" title="" value="1" (click)="changeValue($event)">1
        <input name="myVal" type="radio" title="" value="2" (click)="changeValue($event)">2
        <input name="myVal" type="radio" title="" value="3" (click)="changeValue($event)">3
        <input name="myVal" type="radio" title="" value="4" (click)="changeValue($event)">4
        <input name="myVal" type="radio" title="" value="5" (click)="changeValue($event)">5
        <hr>
       <span [ngSwitch]="myVal">
          <span *ngSwitchCase="'1'">ONE</span>
          <span *ngSwitchCase="'2'">TWO</span>
          <span *ngSwitchCase="'3'">THREE</span>
          <span *ngSwitchCase="'4'">FOUR</span>
          <span *ngSwitchCase="'5'">FIVE</span>
          <span *ngSwitchDefault>other</span>
	    </span>
</div>
<hr>
<div>
    <h2>ngStyle</h2>
    <div [ngStyle]="{'background-color': ngStyleList.backgroundColor,'color':ngStyleList.color}" [style.font-size]="30">
        背景 :{{ngStyleList.backgroundColor}} <br/>
        字体颜色: {{ngStyleList.color}}
    </div>
</div>
<hr>
<div>
    <h2>ngClass</h2>
    左边是class名[要用<code>''</code>包起来]，右边是一个true|false表达式或者是一个方法<br/>
    <button class="btn" [ngClass]="{'btn-danger': ngStyleList}">测试</button>
    <button class="btn" [ngClass]="fn()">fn</button>
</div>